<template>
  <div id="adress">
    <div class="order-receive-box withManage">
      <div class="order-receive-cont-outer">
        <ul class="order-receive-cont">
          <li class="order-receive-item tl cn" v-for="(value,index) in addresses" :key="index">
            <p class="title">
              <span class="name">{{value.name}}</span>
              (收)
            </p>
            <p class="info info-city">{{value.province}} {{value.city}} {{value.local}}</p>
            <p class="info info-road">{{value.remark}}</p>
            <p class="info info-tel">{{value.tel}}</p>
            <div class="operate">
              <el-link type="primary"  @click="editAddress(value)">编辑</el-link>
              <el-link type="primary" @click="delAddress(value.id)">删除</el-link>
              <el-link type="primary" @click="setDefault(value)">设为默认地址</el-link>
            </div>
          </li>
          <li class="order-receive-item">
            <div class="addNewBox-icon" @click="addAddress()" >
              <i class="el-icon-plus"></i>
            </div>
            <div class="addNewBox-text" >添加新地址</div>
          </li>
        </ul>
      </div>
    </div>
        
    <el-dialog :title="title"  :visible.sync="dialogFormVisible" class="tl" top="25vh" width ="40%">
      <el-form :model="form" >
        <el-form-item label="收件人姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item label="收货电话" :label-width="formLabelWidth">
         <el-input v-model="form.mobile" autocomplete="off" style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item label="请选择" :label-width="formLabelWidth">
          <template>
          <v-distpicker :placeholders="placeholders" @selected="selected"></v-distpicker>
        </template>
        </el-form-item>
        <el-form-item label="详细地址(小区)" :label-width="formLabelWidth">
          <el-input v-model="form.remark" autocomplete="off" style="width: 400px;"></el-input>
        </el-form-item>
        <br>
         <el-checkbox v-model="form.default" style="margin-left: 120px;">设为默认地址</el-checkbox>
      </el-form>
      <div slot="footer" style="margin-right:180px">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdate()">确 定</el-button>
      </div>
    </el-dialog>
   
  </div>
</template>

<script>
export default {
  data() {
    return {
      title:"",
      addresses: [
      ],
      placeholders:{
              province: '------- 省 --------',
              city: '--- 市 ---',
              area: '--- 区 ---',
       },
      dialogFormVisible: false,
      form: {
        name:"",
        local:"",
        remark:"",
        city:"",
        province:"",
        mobile:"",
        default:"",
        code:""
      },
      formLabelWidth: "120px"
    };
  },
  mounted(){
     this.axios.get("/user/delivers").then((resp)=>{
       this.addresses = resp.data
    })
  },
  methods: {
    reload(){
      this.axios.get("/user/delivers").then((resp)=>{
        this.addresses = resp.data
      })
    },
    selected(val){
        this.form.province = val.province.value
        this.form.city = val.city.value
        this.form.local = val.area.value
        this.form.code = val.area.code
    },
    editAddress(val){
      this.title = "编辑地址"
      this.dialogFormVisible=true
      this.form = val
    },
    delAddress(val){
        this.$confirm('确认删除该地址吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.axios.del('/user/delivers',{
              ids:[val]
            }).then((resp)=>{
              if(resp.code==0){
                this.$message.success(resp.msg)
                this.reload()
                this.dialogFormVisible=false
              }else{
                this.$message.error(resp.msg)
              }
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除'
          });          
        });
    },
    addAddress(){
      this.form = {}
      this.dialogFormVisible=true
      this.title = "新增地址"
    },
    saveOrUpdate(){
      this.axios.post("user/delivers",this.form).then(resp=>{
        if(resp.code==0){
          this.$message.success(resp.msg)
          this.reload()
          this.dialogFormVisible=false
        }else{
          this.$message.error(resp.msg)
        }
      })
    },
    setDefault(value){
      value.default = true
      this.axios.post("user/delivers",value).then(resp=>{
        if(resp.code==0){
          this.$message.success("成功设置为默认收货地址！")
          this.reload()
          this.dialogFormVisible=false
        }else{
          this.$message.error(resp.msg)
        }
      })
    }
  }
};
</script>

<style scoped>
#adress {
  min-height: 515px;
  margin-top: 36px;
  /* padding-left: 85px; */
  /* background-color: bisque; */
}
.order-receive-box {
  overflow: hidden;
}
.order-receive-cont-outer {
  overflow: hidden;
  height: 150px;
}
.order-receive-box.withManage .order-receive-cont-outer {
  height: auto;
}
.order-receive-cont {
  overflow: hidden;
  margin-left: -24px;
  margin-top: -24px;
}
.order-receive-item {
  box-sizing: border-box;
  position: relative;
  float: left;
  width: 316px;
  height: 150px;
  padding: 20px 20px 0 20px;
  border: 1px solid #ddd;
  margin-left: 24px;
  margin-top: 24px;
  cursor: pointer;
}
.order-receive-item:hover {
  border: 1px dashed #0076a4;
}
.order-receive-item:hover .operate {
  display: block;
}
.order-receive-box.withManage .addNewBox-icon {
  position: relative;
  width: 40px;
  height: 40px;
  margin: 20px auto 0;
}

.order-receive-box.withManage .addNewBox-text {
  text-align: center;
  margin-top: 12px;
  color: #888;
}

.el-icon-plus:before {
  font-size: 40px;
  color: #888;
}
.order-receive-item:hover .addNewBox-text,
.order-receive-item:hover .el-icon-plus:before {
  color: #0076a4;
}

/* 地址框 */
.order-receive-item .title {
  height: 16px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 16px;
  font-weight: bold;
}
.order-receive-item .title .name {
  float: left;
  max-width: 85px;
  height: 16px;
}
.order-receive-item .info {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-wrap: normal;
}
.order-receive-item .info {
  height: 22px;
  font-size: 12px;
  line-height: 22px;
}
.order-receive-item .info-city {
  width: 140px;
}

/* 编辑删除 */
.order-receive-item .operate {
  display: none;
  margin-top: 5px;
}
.cn {
  cursor: auto;
}
.operate el-link {
  cursor: pointer;
  color: #29a3d6;
}
.operate el-link:hover {
  text-decoration: underline #29a3d6;
}
</style>
